<script setup lang="ts">
/**
 * @author lwlianghehe@gmail.com
 * @date 2024/11/22 12:30
 */

const total = defineModel('total', {type: Number, default: 0})
const begin = defineModel('begin', {type: Number, default: 0})
const end = defineModel('end', {type: Number, default: 0})
const emit = defineEmits(['pageChange'])

const props = defineProps({
	showNumber: { type: Boolean, default: true },
	leftPointer: { type: Boolean, default: false },
	rightPointer: { type: Boolean, default: false }
})

const pageChangeClick = (dir: string) => {
	if (dir == 'left') {
		if (props.leftPointer) {
			emit('pageChange', dir)
		}
	} else {
		if (props.rightPointer) {
			emit('pageChange', dir)
		}
	}
}


</script>

<template>
	<div class="flex items-center gap-1">
		<template v-if="props.showNumber">
			<div class="flex items-center">
				<div style="color: #374151">{{ begin }}</div>
				<div style="color: #374151">-</div>
				<div style="color: #374151">{{ end }}</div>
			</div>
			<div style="color: #374151">/</div>
			<div style="color: #374151">{{ total }}</div>
		</template>
		<div @click="pageChangeClick('left')"
				:class="['bg-background-component px-3 py-0.5 rounded',{'cursor-pointer':(props.leftPointer),
                'hover:bg-background-base':(props.leftPointer)}]">
			<MyIcon type="fas" icon="angle-left" color="#AAA" ></MyIcon>
		</div>
		<div @click="pageChangeClick('right')"
				:class="['bg-background-component px-3 py-0.5 rounded',{'cursor-pointer':(props.rightPointer),
                'hover:bg-pagination-hover':(props.rightPointer)}]">
			<MyIcon type="fas" icon="angle-right" color="#AAA"></MyIcon>
		</div>
	</div>
</template>

<style scoped>

</style>